<template>
  <div id="select-area">
    <div class="search-tree-wrap">
      <el-input
        v-model.trim="name"
        style="width:75%"
        placeholder="输入名称搜索"
        class="search-input"
        clearable
        @clear="clearSearchTree"
      />
      <el-button class="filter-item tree-filter" style="margin-left:20px;" type="primary" @click="getTree">搜索</el-button>
    </div>
    <el-tree
      ref="tree"
      v-loading="treeloading"
      :data="treeData"
      :props="defaultProps"
      :expand-on-click-node="true"
      highlight-current
      node-key="id"
      :load="loadtree"
      lazy
      show-checkbox
      check-strictly
      @check-change="getChecked"
    />
  </div>
</template>
<script>
import { queryArea, getOrgTreeSync } from '../api'
export default {
  name: 'SelectEnterprise',
  data() {
    return {
      name: '',
      treeloading: false,
      treeData: [],
      defaultProps: {
        children: 'list',
        label: 'zoneName'
      },
      checkedData: {} // 选中的节点
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    /**
     * 清空搜索赛事
     */
    clearSearchTree() {
      this.name = ''
      this.getTree()
    },
    getChecked(data, checked) {
      if (checked) {
        this.$refs.tree.setCheckedKeys([data.id])
        this.checkedData = data
      } else {
        // this.checkedData = {}
      }
    },
    getTree() {
      this.treeloading = true
      return new Promise((resolve, reject) => {
        queryArea().then(response => {
          this.treeloading = false
          this.treeData = response.data.data
        }).catch(error => {
          reject(error)
          this.treeloading = false
        })
      })
    },
    loadtree(node, resolve) {
      this.treeloading = true
      if (node.level !== 0) {
        getOrgTreeSync({
          parentId: node.data.id
        }).then(res => {
          this.treeloading = false
          resolve(res.data.data)
        }).catch(res => {
          this.treeloading = false
          resolve([])
        })
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
#select-area {
  height: 400px;
  overflow: hidden;
  .search-tree-wrap {
    display: flex;
    //justify-content: space-between;
    align-items: center;

    .tree-filter {
      padding: 10px 18px;
    }
  }
  .power-tree {
    height: 100%;
    overflow: auto;
  }
  .el-tree-node__content {
    margin-top: 5px;
  }
  .tag {
    font-size: 12px;
    border-radius: 4px;
    padding: 2px 4px;
    color: #fff;
  }
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-icon-caret-right:before {
    content: "\E7A0";
    font-size: 14px;
  }
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    content: "\E7A2";
    font-size: 14px;
  }
}
</style>

